@mixin btnStyle() {
  @apply flex rounded-lg items-center justify-center text-base text-white bg-theme;
  height: 3.25rem;

  & > img {
    width: 1.625rem;
    height: 1.625rem;
    margin-right: 0.375rem;
  }

  &:active {
    @apply opacity-80;
  }
}

@mixin spaceLine() {
  @apply absolute top-2/4;
  content: '';
  width: 6.25rem;
  height: 0.0625rem;
  background-color: #4d4d4d;
  transform: translateY(-50%);
}

.joinChat {
  @apply inline-block cursor-pointer text-center outline-0 text-theme bg-transparent;
  width: 10.875rem;
  height: 2.75rem;
  line-height: 2.75rem;
  border: 1px solid var(--theme-color);
  border-radius: 2.75rem;
  margin-bottom: 1.875rem;

  &:hover {
    @apply opacity-80;
  }
}

.usb-step-box {
  @apply w-8 text-xl font-bold text-white text-center ml-6;
  height: 2.8125rem;
  line-height: 2.8125rem;
  background-size: 100% 100%;
  background-image: url('/images/step_icon.png');
  font-family: OPPOSans;
}

.downloadContainer {
  background-image: url('/images/download_bg.png');
  background-size: 100% 100%;
  min-height: 100vh;
  border: 1px solid transparent;

  .download {
    @apply w-full h-full flex flex-col items-center mt-20;

    .download-img {
      width: 19.375rem;
      height: 11.875rem;
      margin: 3.625rem 0 3rem;
    }

    .download-slogan {
      @apply font-bold text-white;
      font-size: 3.125rem;
      line-height: 3.75rem;
    }

    .download-desc {
      @apply text-xl;
      line-height: 1.875rem;
      color: rgba(255, 255, 255, 0.8);
      margin: 0.875rem 0 0.5625rem;
    }

    .download-box {
      @apply flex justify-center flex-wrap;
      margin-top: 2.625rem;

      .download-box-item {
        @apply mb-5 shrink-0 rounded-lg flex flex-col items-center mr-10;
        width: 27.25rem;
        height: 14.625rem;
        background-color: #0a0c15;

        .box-item-title {
          @apply flex items-center;
          margin-top: 1.625rem;
          height: 1.875rem;

          & > img {
            @apply mr-2;
            width: 1.875rem;
            height: 1.875rem;
          }

          & > span {
            @apply text-xl text-white;
          }
        }

        .box-item-title2 {
          @apply text-xl text-white;
          height: 1.875rem;
          line-height: 1.875rem;
        }

        .box-item-desc {
          @apply text-sm leading-5;
          color: #ffd489;
          margin-top: 0.625rem;
        }

        .box-item-tv-download {
          @include btnStyle();
          width: 20rem;
          margin-top: 1.8125rem;
        }

        .box-item-right-code {
          @apply flex;
          margin-top: 1.625rem;

          .item-right-code-left {
            .box-item-phone-download {
              @apply top-1;
              @include btnStyle();
              width: 15.75rem;
            }

            .box-item-phone-text {
              @apply text-sm mt-4;
              color: rgba(255, 255, 255, 0.6);

              & > span:last-child {
                @apply cursor-pointer text-theme;
                margin-left: 0.625rem;
              }
            }
          }

          .item-right-code-right {
            @apply ml-6;
            width: 6.25rem;
            height: 6.25rem;
          }
        }

        .box-item-type {
          @apply mt-4;

          & > a:hover {
            @apply text-white;
          }

          & > a {
            @apply text-sm;
            color: rgba(255, 255, 255, 0.6);
          }

          & > a:first-child {
            @apply mr-9;
          }
        }
      }
    }

    .joyen {
      @apply object-contain mt-6;
      width: 14.125rem;
      height: 4.125rem;
    }
  }
}

.back {
  @apply h-6 text-white opacity-60 text-base flex items-center mt-3 cursor-pointer;
  width: 3.125rem;

  & > img {
    @apply h-3;
    width: 0.4375rem;
  }

  span {
    margin-left: 0.375rem;
  }

  &:hover {
    @apply opacity-100;
  }
}

.usb {
  width: calc(100% - 1rem);

  .title {
    @apply text-white text-2xl my-5;
    font-family: 'SimHei', '黑体', sans-serif;
    line-height: 1.875rem;
  }

  .nousb-title {
    @apply text-white text-2xl my-5;
    font-family: 'SimHei', '黑体', sans-serif;
    line-height: 1.875rem;
  }

  .video-course {
    @apply mb-4;
    width: 30rem;
    height: 16.875rem;
  }

  .usb-step {
    @apply text-base leading-6;
    max-width: 47.5rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .usb-download {
    @apply block text-sm text-center text-white mt-3 mb-5 bg-theme;
    width: 6rem;
    height: 2.125rem;
    line-height: 2.125rem;
    border-radius: 2.125rem;

    &:active {
      @apply opacity-80;
    }
  }

  .usb-picture {
    @apply flex mb-10;

    .usb-picture-item {
      @apply relative;
      width: 25rem;
      height: 14.1875rem;
      background-size: 100% 100%;

      &:nth-child(1) {
        background-image: url('/images/step1.webp');
        @apply mr-10;
      }

      &:nth-child(2) {
        background-image: url('/images/step2.webp');
      }

      .picture-item-icon {
        @apply w-8 mr-6;
        height: 2.8125rem;
      }
    }
  }

  .nousb-picture {
    @apply flex mb-1 flex-wrap;
    width: calc(100% + 1.5rem);

    .nousb-picture-item {
      @apply mb-9 mr-6;
      width: 23.125rem;
      height: 15rem;
      background-size: 100% 100%;
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .backPhone {
    @apply ml-4 text-sm;
  }

  .usbPhone {
    @apply my-0 mx-auto;
    width: calc(100vw - 2rem);

    .title {
      @apply text-lg leading-6;
      margin: 0.625rem 0;
      font-size: 1.125rem;
    }

    .usb-step {
      @apply text-sm leading-5;
    }

    .usb-download {
      @apply my-3;
    }

    .usb-picture {
      @apply flex-wrap w-full h-auto;

      .usb-picture-item {
        margin: 0 !important;

        &:nth-child(1) {
          margin-bottom: 0.625rem !important;
        }
      }
    }

    .nousb-title {
      @apply text-lg leading-6 flex-wrap items-center;
      margin: 0.625rem 0;

      .nousb-title-video {
        & > span,
        & > a {
          @apply text-xs;
        }
      }
    }

    .video-course {
      @apply w-full;
      aspect-ratio: 16 / 9;
    }
  }

  .step-img-phone {
    @apply w-full h-auto relative mb-4;
  }

  .joinChatPhone {
    @apply text-sm h-10 leading-10;
    width: 9rem;
  }

  .usb-step-phone {
    @apply ml-4 w-6 h-8 leading-8 text-sm;
  }

  .downloadH5 {
    @apply text-center my-0 mx-auto;
    width: calc(100vw - 2rem);
    padding-top: 6.5rem;

    .download-h5-tab {
      @apply flex;

      .download-h5-tab-item {
        @apply w-2/4 h-10 flex items-center justify-center text-sm text-white;
        border-radius: 2.5rem;

        & > img {
          @apply mr-1;
          width: 1.375rem;
          height: 1.375rem;
        }

        &.download-h5-tab-active {
          @apply text-theme;
          background-color: #262626;
        }
      }
    }

    .download-h5-slogan {
      @apply text-2xl font-bold text-white mt-10 mx-auto mb-2;
    }

    .download-h5-desc {
      @apply text-xs;
      line-height: 1.125rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .download-h5-img {
      @apply block mt-7 mx-auto mb-5;
      width: 18.75rem;
      height: 13.25rem;
    }

    .download-h5-tv {
      @apply text-white text-lg w-fit my-0 mx-auto;

      .download-h5-before {
        @apply text-xs text-white rounded bg-theme;
        padding: 0.25rem 0.375rem;
        margin-right: 0.375rem;
      }
    }

    .download-h5-advantage {
      @apply text-xs;
      color: #ffc1a2;
      margin: 0.5rem auto 1.875rem;
    }

    .download-h5-btn-down {
      @apply block h-10 leading-10 bg-theme text-center text-white text-sm;
      margin: 0 auto 1.375rem;
      width: 13.75rem;
      border-radius: 2.5rem;

      &.active {
        @apply opacity-80;
      }
    }

    .download-h5-guide {
      @apply pb-9;

      & > a {
        @apply text-xs;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.125rem;
      }

      & > a:nth-child(1) {
        @apply mr-10;
      }
    }
  }
}
